<template>
  <div class="subject-container">
    <!--  筛选条件  -->
    <div class="box">
      <!--课程来源-->
      <div class="box-source">
        <div class="title">
          课程来源：
        </div>
        <div>
          <CheckboxGroup v-model="source" @on-change="changeSource">
            <Checkbox :label="0" border>自研</Checkbox>
            <Checkbox :label="1" border>外链</Checkbox>
            <Checkbox :label="2" border>外聘</Checkbox>
          </CheckboxGroup>
        </div>
      </div>

      <!--课程专题-->
      <div class="box-topic">
        <div class="title">
          <Checkbox
              :indeterminate="indeterminate"
              :value="checkAll"
              @click.prevent.native="handleCheckAll">专题分类：
          </Checkbox>
        </div>
        <div>
          <CheckboxGroup v-model="topicIdList" @on-change="checkTopic">
            <Checkbox :label="obj.topicId"
                      border
                      v-for="(obj,i) in topicList"
                      :key="obj.topicId">
              {{ obj.topicName }}
            </Checkbox>
          </CheckboxGroup>
        </div>
      </div>
      <div></div>
    </div>

    <!--排序和添加-->
    <div class="header-box" style="display:flex;justify-content: flex-end">
      <div @click="order">
        <IconAli :sty="{width:'40px',height:'40px',margin:'-2px 0px 0px 0px'}" icon='order-1'></IconAli>
      </div>
      <div @click="add">
        <IconAli :sty="{width:'32px',height:'32px',marginRight:'32px'}" icon='add'></IconAli>
      </div>
    </div>

    <!-- 具体课程 -->
    <div class="box-course">
      <Table :columns="columns"
             :data="courseList"
             stripe
             border
             :highlight-row="true"
             size=large>

        <template slot-scope="{ row, index }" slot="source">
          <div v-if="row.courseSource==0" class="source my">自研</div>
          <div v-if="row.courseSource==1" class="source link">外链</div>
          <div v-if="row.courseSource==2" class="source teacher">外聘</div>
        </template>

        <template slot-scope="{ row, index }" slot="courseCover">
          <img :src="row.courseCover" alt="图片无法正常显示,请重置或联系管理员" title="封面" style="width:100px;height:62px">
        </template>

        <template slot-scope="{ row, index }" slot="course">
          <div style="line-height:58px;width: 100%;height: 58px;" @click="editCourse(row)">
            {{ row.courseName }}
          </div>
        </template>

        <template slot-scope="{ row, index }" slot="status">
          <i-switch v-model="row.status==1"
                    true-color="#19BE6B" false-color="#ff4949"
                    size="large"
                    @on-change="lock(row)">
            <span slot="open">在用</span>
            <span slot="close">冻结</span>
          </i-switch>
        </template>

        <template slot-scope="{ row, index }" slot="handle">
          <div style="display: flex;justify-content: center;">
            <div @click="update(row)">
              <IconAli :sty="{width:'30px',height:'30px',marginRight:'4px'}" icon='edit'></IconAli>
            </div>
            <div @click="del(row)">
              <IconAli :sty="{width:'30px',height:'30px',marginLeft:'4px'}" icon='sub'></IconAli>
            </div>
          </div>
        </template>

      </Table>

    </div>


    <!--新增-->
    <Modal
        v-model="addFlag"
        title="新增课程"
        :mask-closable="false"
        draggable
        mask
        sticky
        :sticky-distance="100"
        width="1000px"
        @on-visible-change="okChange"
        @on-ok="addOk">

      <el-form label-position="right" label-width="80px">
        <el-form-item label="专题分类">
          <Select v-model="topicId" size="large">
            <Option v-for="(obj,i) in topicList" :value="obj.topicId" :key="obj.topicId">{{ obj.topicName }}</Option>
          </Select>
        </el-form-item>
        <el-form-item label="课程名称">
          <el-input clearable
                    placeholder="请输入课程名称"
                    type="text"
                    v-model="courseName"
                    maxlength="60"
                    show-word-limit></el-input>
        </el-form-item>

        <el-form-item label="课程来源">
          <el-radio-group v-model="courseSource">
            <el-radio :label="0">自研</el-radio>
            <el-radio :label="1">外链</el-radio>
            <el-radio :label="2">外聘</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="社区链接">
          <el-input clearable v-model="courseCommunityUrl" style="width:770px;margin-right: 10px"></el-input>
          <el-button plain type="primary" icon="el-icon-position" @click="linkTest(courseCommunityUrl)">
            跳转
          </el-button>
        </el-form-item>

        <el-form-item label="课程封面">
          <el-input clearable
                    placeholder="输入课程封面URL 或者 上传图片"
                    type="text"
                    v-model="courseCover"
                    maxlength="255"
                    style="width:770px;margin-right: 10px"
                    show-word-limit>
          </el-input>
          <el-button plain type="primary" icon="el-icon-position" @click="linkTest(courseCover)">
            跳转
          </el-button>
          <CommonFile :limit="1" :fileList="courseCoverList" @my-event-fileList="getCourseCover"></CommonFile>
        </el-form-item>

        <el-form-item label="课程图片">
          <el-input clearable
                    placeholder="输入课程图片URL 或者 上传图片"
                    type="text"
                    v-model="coursePic"
                    maxlength="255"
                    style="width:770px;margin-right: 10px"
                    show-word-limit>

          </el-input>
          <el-button plain type="primary" icon="el-icon-position" @click="linkTest(coursePic)">
            跳转
          </el-button>
          <CommonFile :limit="1" :fileList="coursePicList" @my-event-fileList="getCoursePic"></CommonFile>
        </el-form-item>

        <el-form-item label="职教老师">
          <Select v-model="courseTeacher" multiple clearable>
            <Option v-for="(obj,i) in teacherList" :value="obj.teacherId" :key="obj.teacherId">{{
                obj.teacherName
              }}
            </Option>
          </Select>
        </el-form-item>

        <el-form-item label="QQ群">
          <div v-for="(obj,i) in qqGroup" style="display:flex">
            <Input type="text"
                   clearable
                   style="width:150px"
                   v-model="qqGroup[i]"
                   placeholder="请输入QQ群号码">
            </Input>
            <div @click="delQQ(i)">
              <IconAli :sty="{width:'26px',height:'26px',margin:'3px 0 0 4px'}" icon='sub'></IconAli>
            </div>
          </div>
          <div @click="addQQ" style="width:26px;height:26px;">
            <IconAli :sty="{width:'26px',height:'26px',margin:'3px 0 0 4px'}" icon='add'></IconAli>
          </div>
        </el-form-item>

        <el-form-item label="课程简介">
          <Input
              clearble
              v-model="courseIntroduction"
              maxlength="200"
              type="textarea"
              :autosize="{minRows: 3}"
              show-word-limit/>
        </el-form-item>

      </el-form>

    </Modal>

    <!--删除-->
    <Modal
        v-model="deleteFlag"
        title="删除课程信息"
        :mask-closable="false"
        draggable
        sticky
        @on-ok="deleteOk">
      <template #header>
        <IconAli :sty="{width:'40px',height:'40px'}" icon='danger' style="margin:6px 0px 0px 16px"></IconAli>
      </template>

      <div style="display:flex;flex-direction:column;margin-left: 16px">
        <div class="delTip">是否删除以下课程,此操作不可撤销,请谨慎操作!</div>
        <div class="nodeTip">{{ courseName }}</div>
      </div>

    </Modal>

    <!--修改-->
    <Modal
        v-model="updateFlag"
        title="编辑课程信息"
        :mask-closable="false"
        draggable
        sticky
        width="1000px"
        @on-ok="updateOk">

      <el-form label-position="right" label-width="80px">
        <el-form-item label="专题分类">
          <Select v-model="topicId" size="large">
            <Option v-for="(obj,i) in topicList" :value="obj.topicId" :key="obj.topicId">{{ obj.topicName }}</Option>
          </Select>
        </el-form-item>
        <el-form-item label="课程名称">
          <el-input clearable
                    placeholder="请输入课程名称"
                    type="text"
                    v-model="courseName"
                    maxlength="60"
                    show-word-limit></el-input>
        </el-form-item>

        <el-form-item label="课程来源">
          <el-radio-group v-model="courseSource">
            <el-radio :label="0">自研</el-radio>
            <el-radio :label="1">外链</el-radio>
            <el-radio :label="2">外聘</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="社区链接">
          <el-input clearable v-model="courseCommunityUrl" style="width:770px;margin-right: 10px"></el-input>
          <el-button plain type="primary" icon="el-icon-position" @click="linkTest(courseCommunityUrl)">
            跳转
          </el-button>
        </el-form-item>

        <el-form-item label="课程封面">
          <el-input clearable
                    placeholder="输入课程封面URL 或者 上传图片"
                    type="text"
                    v-model="courseCover"
                    maxlength="255"
                    style="width:770px;margin-right: 10px"
                    show-word-limit>
          </el-input>
          <el-button plain type="primary" icon="el-icon-position" @click="linkTest(courseCover)">
            跳转
          </el-button>
          <CommonFile :limit="1" :fileList="courseCoverList" @my-event-fileList="getCourseCover"></CommonFile>
        </el-form-item>

        <el-form-item label="课程图片">
          <el-input clearable
                    placeholder="输入课程图片URL 或者 上传图片"
                    type="text"
                    v-model="coursePic"
                    maxlength="255"
                    style="width:770px;margin-right: 10px"
                    show-word-limit>

          </el-input>
          <el-button plain type="primary" icon="el-icon-position" @click="linkTest(coursePic)">
            跳转
          </el-button>
          <CommonFile :limit="1" :fileList="coursePicList" @my-event-fileList="getCoursePic"></CommonFile>
        </el-form-item>

        <el-form-item label="职教老师">
          <Select v-model="courseTeacher" multiple clearable>
            <Option v-for="(obj,i) in teacherList" :value="obj.teacherId" :key="obj.teacherId">{{
                obj.teacherName
              }}
            </Option>
          </Select>
        </el-form-item>

        <el-form-item label="QQ群">
          <div v-for="(obj,i) in qqGroup" style="display:flex">
            <Input type="text"
                   clearable
                   style="width:150px"
                   v-model="qqGroup[i]"
                   placeholder="请输入QQ群号码">
            </Input>
            <div @click="delQQ(i)">
              <IconAli :sty="{width:'26px',height:'26px',margin:'3px 0 0 4px'}" icon='sub'></IconAli>
            </div>
          </div>
          <div @click="addQQ" style="width:26px;height:26px;">
            <IconAli :sty="{width:'26px',height:'26px',margin:'3px 0 0 4px'}" icon='add'></IconAli>
          </div>
        </el-form-item>

        <el-form-item label="课程简介">
          <Input
              clearble
              v-model="courseIntroduction"
              maxlength="200"
              type="textarea"
              :autosize="{minRows: 3}"
              show-word-limit/>
        </el-form-item>

      </el-form>

    </Modal>

    <Drawer title="课程"
            :closable="false"
            width="90%"
            :draggable="true"
            :mask-closable="true"
            closable
            @on-resize-width="changeWidth"
            v-model="courseDetailsFlag">
      <Course :courseId="courseId" v-if="courseDetailsFlag"></Course>
    </Drawer>

    <Modal
        v-model="orderFlag"
        title="请排序"
        :mask-closable="false"
        draggable
        sticky
        width="800px"
        @on-ok="orderOk">

      <Order :dataList="orderList" @my-event-order-list="getOrderList"></Order>

    </Modal>
  </div>
</template>

<script>
import IconAli from "@/views/common/IconAli";
import Course from "@/components/course/Course";
import CommonFile from "@/views/common/CommonFile"
import Order from "@/views/common/Order"

export default {
  //组件名称
  name: "Subject",
  //组件注册
  components: {IconAli, Course, CommonFile, Order},
  //数据驱动
  data() {
    return {
      flag: "subject",
      source: [0, 1, 2], //课程来源

      topicList: [],  //专题名称
      topicIdList: [], //专题id
      indeterminate: false, //专题分类状态
      checkAll: true,  //是否全选

      courseList: [],  //课程列表
      columns: [
        {
          type: "index",
          title: '索引',
          resizable: true,
          width: 80,
          align: "center"
        },
        {
          title: '编号',
          key: 'courseId',
          resizable: true,
          width: 240,
          align: "center"
        },
        {
          title: '来源',
          key: 'source',
          width: 100,
          resizable: true,
          align: "center",
          slot: 'source',
        },
        {
          title: '专题分类',
          key: 'topicName',
          width: 200,
          resizable: true,
          align: "center"
        },
        {
          title: '课程图片',
          key: 'courseCover',
          resizable: true,
          align: "center",
          width:140,
          slot: "courseCover"
        },
        {
          title: '课程名称',
          key: 'courseName',
          resizable: true,
          align: "center",
          slot: "course"
        },
        {
          title: '状态',
          key: 'status',
          resizable: true,
          align: "center",
          slot: 'status',
          width: 140,
          sortable: true
        },
        {
          title: '操作',
          key: 'handle',
          align: "center",
          width: 140,
          slot: 'handle',
        }
      ],

      addFlag: false,  //新增课程
      updateFlag: false, //编辑课程
      deleteFlag: false, //删除课程
      orderFlag: false, //排序课程
      teacherList: [
        {teacherId: "1", teacherName: "张三"},
        {teacherId: "2", teacherName: "李四"},
        {teacherId: "3", teacherName: "王二"},
      ], //教师
      orderList: [],
      orderIdList: [], //排序过后的数据列表
      /**
       * 课程信息
       */
      courseId: "",
      topicId: "",
      courseName: "",
      courseSource: 1,
      courseCover: "",
      courseCoverList: [],
      coursePic: "",
      coursePicList: [],
      courseCommunityUrl: "",
      courseTeacher: [],
      qqGroup: [],
      courseIntroduction: "",

      //课程 抽屉
      courseDetailsFlag: false
    }
  },
  //计算属性
  computed: {},
  //数据监听
  watch: {
    courseCover: function (newValue, oldValue) {
      if (newValue != "") {
        let cover = {"url": newValue}
        this.courseCoverList = []
        this.courseCoverList.push(cover)
      }
    },
    coursePic: function (newValue, oldValue) {
      if (newValue != "") {
        let pic = {"url": newValue}
        this.coursePicList = []
        this.coursePicList.push(pic)
      }
    },
  },
  //方法
  methods: {
    //全选
    handleCheckAll() {
      if (this.indeterminate) {
        this.checkAll = false;
      } else {
        this.checkAll = !this.checkAll;
      }
      this.indeterminate = false;
      if (this.checkAll) {
        for (let i of this.topicList) {
          this.topicIdList.push(i.topicId)
        }
      } else {
        this.topicIdList = [];
      }
      this.selectCourseList()
    },
    changeSource() {
      this.selectCourseList()
    },
    //选择主题
    checkTopic(data) {
      let allLength = this.topicList.length - 1;
      if (data.length == allLength) {
        this.indeterminate = true;
      } else {
        this.indeterminate = false;
      }
      this.selectCourseList()
    },
    order() {
      console.log(this.courseList);
      this.orderList.length = 0;
      for (let i = 0; i < this.courseList.length; i++) {
        let obj = this.courseList[i];
        let tmp = {
          "id": obj.courseId,
          "title": obj.courseName
        }
        this.orderList.push(tmp)
      }
      this.orderFlag = true
    },
    getOrderList(data) {
      this.orderIdList = data.idList
    },
    orderOk() {
      this.axios.post("/course/course/course/order", this.orderIdList)
          .then((data) => {
            this.selectCourseList();
            this.$Message.success('课程排序成功!');
          })
    },
    add() {
      this.addFlag = true;
      //设置为空
      this.courseId = "",
          this.topicId = "",
          this.courseName = "",
          this.courseCover = "",
          this.courseCoverList = [],
          this.coursePic = "",
          this.coursePicList = [],
          this.courseCommunityUrl = "",
          this.courseTeacher = [],
          this.qqGroup = [],
          this.courseIntroduction = ""
    },
    okChange() {

    },
    addOk() {
      let qqGroup = this.array.arrJoin(this.qqGroup);
      let teacherName = this.array.arrJoin(this.courseTeacher);
      let data = {
        topicId: this.topicId,
        courseName: this.courseName,
        courseSource: this.courseSource,
        courseCover: this.courseCover,
        coursePic: this.coursePic,
        courseCommunityUrl: this.courseCommunityUrl,
        courseTeacher: teacherName,
        qqGroup: qqGroup,
        courseIntroduction: this.courseIntroduction,
      }
      this.axios.post("/course/course/course", data)
          .then((data) => {
            this.selectCourseList();
            this.$Message.success('课程添加成功!');
          })
    },
    getCourseCover(fileList) {
      if (fileList.length > 0) {
        this.courseCover = fileList[0].url;
      } else {
        this.courseCover = ""
      }
    },
    getCoursePic(fileList) {
      if (fileList.length > 0) {
        this.coursePic = fileList[0].url;
      } else {
        this.coursePic = ""
      }
    },
    linkTest(url) {
      window.open(url, '_blank');
    },
    delQQ(i) {
      this.qqGroup.splice(i, 1)
    },
    addQQ() {
      this.qqGroup.push("")
    },
    //编辑课程
    editCourse(row) {
      this.courseId = row.courseId
      this.courseDetailsFlag = true
    },
    //锁定，解锁课程
    lock(row) {
      let status = row.status;
      let newStatus = 1;
      if (status == 1) {
        newStatus = 0;
      }
      let data = {
        courseId: row.courseId,
        status: newStatus
      }
      this.axios.put(`/course/course/course/status/${row.courseId}`, data)
          .then((data) => {
            this.selectCourseList();
            this.$Message.success('课程状态修改成功');
          })
    },
    update(row) {
      this.updateFlag = true
      this.courseId = row.courseId
      this.axios.get(`/course/course/course/${row.courseId}`)
          .then((data) => {
            this.courseId = data.data.courseId
            this.topicId = data.data.topicId
            this.courseName = data.data.courseName
            this.courseSource = data.data.courseSource
            this.courseCover = data.data.courseCover
            this.coursePic = data.data.coursePic
            this.courseCommunityUrl = data.data.courseCommunityUrl
            this.courseIntroduction = data.data.courseIntroduction

            this.courseTeacher = this.array.arrSplit(data.data.courseTeacher)
            this.qqGroup = this.array.arrSplit(data.data.qqGroup)
            let cover = {
              "url": data.data.courseCover
            }
            this.courseCoverList = []
            this.courseCoverList.push(cover)
            let pic = {
              "url": data.data.coursePic
            }
            this.coursePicList = []
            this.coursePicList.push(pic)
          })
    },
    updateOk() {
      let qqGroup = this.array.arrJoin(this.qqGroup);
      let teacherName = this.array.arrJoin(this.courseTeacher);
      let data = {
        courseId: this.courseId,
        topicId: this.topicId,
        courseName: this.courseName,
        courseSource: this.courseSource,
        courseCover: this.courseCover,
        coursePic: this.coursePic,
        courseCommunityUrl: this.courseCommunityUrl,
        courseTeacher: teacherName,
        qqGroup: qqGroup,
        courseIntroduction: this.courseIntroduction,
      }
      this.axios.put(`/course/course/course/${this.courseId}`, data)
          .then((data) => {
            this.selectCourseList();
            this.$Message.success('课程修改成功!');
          })
    },
    del(row) {
      this.deleteFlag = true
      this.courseId = row.courseId
      this.courseName = row.courseName
    },
    deleteOk() {
      this.axios.delete(`/course/course/course/${this.courseId}`)
          .then((data) => {
            this.selectCourseList();
            this.$Message.success('课程删除成功!');
          })
    },
    //调整抽屉宽度
    changeWidth(){

    },
    selectTopicList() {
      this.axios.get(`/course/topic/topic`)
          .then((data) => {
            this.topicList = data.data
            for (let i of this.topicList) {
              this.topicIdList.push(i.topicId)
            }
            this.selectCourseList()
          })
    },
    selectCourseList() {
      let data = {
        //自研
        source: this.source,
        //专题分类
        topicIdList: this.topicIdList,
      }
      this.axios.post(`/course/course/course/query`, data)
          .then((data) => {
            this.courseList = data.data
          })
    }
  },
  //钩子函数
  mounted() {
    this.selectTopicList()
  }
}
</script>

<style scoped lang="less">
.subject-container {
  width: 96%;
  margin-top: 20px;
  margin-left: 2%;
}

.box {
  .title {
    line-height: 34px;
    min-width: 100px;
  }

  .box-source {
    display: flex;
  }

  .box-topic {
    margin-top: 10px;
    display: flex;
  }
}

.header-box {
  margin-top: 30px;
}

.box-course {
  .source {
    margin: 0 auto;
    width: 40px;
    border-radius: 4px;
    color: #FFF;
    font-weight: bolder;
  }

  .my {
    background-color: #F00;
  }

  .link {
    background-color: #219af1;
  }

  .teacher {
    background-color: #d427fc;
  }
}

.delTip {
  font-size: 20px;
  font-weight: bold;
  color: #F00;
}

.nodeTip {
  margin-top: 6px;
  font-size: 16px;
  color: #000;
  font-weight: bolder;
}
</style>